<template>
    <div class="app">
        <div class="cover">
            <Header></Header>
            <!-- <p>{{ count }}</p> -->
            <p>{{ fullName }} {{ count }}</p>
            <!-- <p>{{ textPlus }}</p> -->
            <!-- <p>{{ textA }}</p> -->
            <!-- <p>{{ textC }}</p> -->
            <router-link to="/app/123">app123</router-link>
            <router-link to="/app/456">app456</router-link>
            <router-link to="/login">login</router-link>
            <!-- <todo></todo> -->
            <transition name="fade">
              <router-view />
            </transition>
            <Footer></Footer>
            <!-- <router-view name="aaa" /> -->
        </div>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
// import { mapState } from "vuex"
import Header from './layout/header.vue'
import Footer from './layout/footer.jsx'
// import Todo from './views/todo/todo.vue'

export default {
  components: {
    Header,
    Footer
    // Todo
  },
  mounted () {
    console.log(this.$store)
    this.updateCountAsync({
      num: 5,
      time: 2000
    })
    // let i = 0
    // setInterval(() => {
    //   this.updateCount({
    //     num: i++,
    //     num2: 2
    //   })
    // }, 1000)
    // this['a/updateText']('123')
    // this['a/add']()
    // this['b/testAction']()
  },
  methods: {
    // ...mapActions(['updateCountAsync', 'a/add', 'b/testAction']),
    // ...mapMutations(['updateCount', 'a/updateText'])
    ...mapActions(['updateCountAsync']),
    ...mapMutations(['updateCount'])
  },
  computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    // ...mapState(['count']),
    ...mapState({
      count: (state) => state.count,
      textA: state => state.a.text,
      textC: state => state.c.text
    }),
    // count () {
    //   return this.$store.state.count
    // },
    ...mapGetters({
      fullName: 'fullName'
      // textPlus: 'a/textPlus'
    })
    // fullName () {
    //   return this.$store.getters.fullName
    // }
  }
}
</script>

<style lang="stylus" scoped>
    .app
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        .cover
            position absolute
            left 0
            right 0
            top 0
            bottom 0
            background-color #999
            opacity .6
            z-index 1

</style>
